<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Text2SQL RAG 系统</title>
    <link rel="stylesheet" href="/static/styles.css">
</head>
<body>
    <div class="container">
        <!-- 侧边栏导航 -->
        <nav class="sidebar">
            <div class="logo">
                <h2>Text2SQL RAG</h2>
            </div>
            <!-- 全局项目选择器 -->
            <div class="global-project-selector">
                <label for="global-project-select">当前项目</label>
                <select id="global-project-select" onchange="onGlobalProjectChange()">
                    <option value="">选择项目</option>
                </select>
            </div>
            <ul class="nav-menu">
                <li><a href="#" data-page="projects" class="nav-link active">项目管理</a></li>
                <li><a href="#" data-page="training" class="nav-link">训练数据</a></li>
                <li><a href="#" data-page="generator" class="nav-link">SQL 生成</a></li>
                <li><a href="#" data-page="corrector" class="nav-link">SQL 纠错</a></li>
                <li><a href="#" data-page="history" class="nav-link">查询历史</a></li>
                <li><a href="#" data-page="config" class="nav-link">系统配置</a></li>
            </ul>
        </nav>

        <!-- 主内容区域 -->
        <main class="main-content">
            <!-- 项目管理页面 -->
            <div id="projects-page" class="page active">
                <div class="page-header">
                    <h1>项目管理</h1>
                    <button class="btn btn-primary" onclick="showCreateProjectModal()">创建项目</button>
                </div>
                <div class="projects-grid" id="projects-grid">
                    <!-- 项目卡片将在这里动态生成 -->
                </div>
            </div>

            <!-- 训练数据页面 -->
            <div id="training-page" class="page">
                <div class="page-header">
                    <h1>训练数据</h1>
                    <div class="header-actions">
                        <div class="project-status" id="training-project-status">
                            <span class="status-text">请先选择项目</span>
                        </div>
                        <button class="btn btn-primary" onclick="showCreateTrainingDataModal()" disabled id="add-training-btn">添加训练数据</button>
                    </div>
                </div>
                <div class="training-data-container">
                    <div class="filter-tabs">
                        <button class="tab-btn active" data-type="all">全部</button>
                        <button class="tab-btn" data-type="ddl">DDL</button>
                        <button class="tab-btn" data-type="question_sql">问题-SQL</button>
                        <button class="tab-btn" data-type="description">描述</button>
                    </div>
                    <div class="training-data-list" id="training-data-list">
                        <!-- 训练数据项将在这里动态生成 -->
                    </div>
                </div>
            </div>

            <!-- SQL生成页面 -->
            <div id="generator-page" class="page">
                <div class="page-header">
                    <h1>SQL 生成</h1>
                    <div class="project-status" id="generator-project-status">
                        <span class="status-text">请先选择项目</span>
                    </div>
                </div>
                <div class="generator-container">
                    <div class="input-section">
                        <div class="form-group">
                            <label for="question-input">自然语言查询</label>
                            <textarea id="question-input" class="form-textarea" placeholder="请输入您的查询问题，例如：查询所有用户的姓名和邮箱"></textarea>
                        </div>
                        <div class="form-group">
                            <label for="db-type-select">数据库类型</label>
                            <select id="db-type-select" class="form-select">
                                <option value="mysql">MySQL</option>
                                <option value="postgresql">PostgreSQL</option>
                                <option value="sqlite">SQLite</option>
                            </select>
                        </div>
                        <button class="btn btn-primary" onclick="generateSQL()">生成 SQL</button>
                    </div>
                    <div class="output-section">
                        <div class="form-group">
                            <label>生成的 SQL</label>
                            <div class="sql-output" id="sql-output">
                                <pre><code id="generated-sql">点击"生成 SQL"按钮开始...</code></pre>
                                <button class="copy-btn" onclick="copySQLToClipboard()">复制</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- SQL纠错页面 -->
            <div id="corrector-page" class="page">
                <div class="page-header">
                    <h1>SQL 纠错</h1>
                    <div class="project-status" id="corrector-project-status">
                        <span class="status-text">请先选择项目</span>
                    </div>
                </div>
                <div class="corrector-container">
                    <div class="input-section">
                        <div class="form-group">
                            <label for="correction-question">原始问题</label>
                            <textarea id="correction-question" class="form-textarea" placeholder="请输入原始的自然语言问题"></textarea>
                        </div>
                        <div class="form-group">
                            <label for="error-sql">错误的 SQL</label>
                            <textarea id="error-sql" class="form-textarea" placeholder="请输入需要纠错的 SQL 语句"></textarea>
                        </div>
                        <div class="form-group">
                            <label for="error-message">错误信息</label>
                            <textarea id="error-message" class="form-textarea" placeholder="请输入数据库返回的错误信息"></textarea>
                        </div>
                        <div class="form-group">
                            <label for="corrector-db-type">数据库类型</label>
                            <select id="corrector-db-type" class="form-select">
                                <option value="mysql">MySQL</option>
                                <option value="postgresql">PostgreSQL</option>
                                <option value="sqlite">SQLite</option>
                            </select>
                        </div>
                        <button class="btn btn-primary" onclick="correctSQL()">纠正 SQL</button>
                    </div>
                    <div class="output-section">
                        <div class="form-group">
                            <label>纠正后的 SQL</label>
                            <div class="sql-output" id="corrected-sql-output">
                                <pre><code id="corrected-sql">点击"纠正 SQL"按钮开始...</code></pre>
                                <button class="copy-btn" onclick="copyCorrectedSQLToClipboard()">复制</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 查询历史页面 -->
            <div id="history-page" class="page">
                <div class="page-header">
                    <h1>查询历史</h1>
                    <div class="header-actions">
                        <div class="project-status" id="history-project-status">
                            <span class="status-text">请先选择项目</span>
                        </div>
                        <select id="history-type-filter" class="form-select">
                            <option value="">全部类型</option>
                            <option value="generation">SQL生成</option>
                            <option value="correction">SQL纠错</option>
                        </select>
                    </div>
                </div>
                <div class="history-list" id="history-list">
                    <!-- 历史记录将在这里动态生成 -->
                </div>
            </div>

            <!-- 系统配置页面 -->
            <div id="config-page" class="page">
                <div class="page-header">
                    <h1>系统配置</h1>
                </div>
                <div class="config-container">
                    <div class="config-section">
                        <h3>LLM 配置</h3>
                        <div class="form-group">
                            <label>模型</label>
                            <input type="text" class="form-input" value="ollama/qwen2.5:latest" readonly>
                        </div>
                        <div class="form-group">
                            <label>温度</label>
                            <input type="text" class="form-input" value="0.0" readonly>
                        </div>
                        <div class="form-group">
                            <label>最大令牌数</label>
                            <input type="text" class="form-input" value="1024" readonly>
                        </div>
                    </div>
                    <div class="config-section">
                        <h3>向量数据库配置</h3>
                        <div class="form-group">
                            <label>Milvus 主机</label>
                            <input type="text" class="form-input" value="localhost" readonly>
                        </div>
                        <div class="form-group">
                            <label>Milvus 端口</label>
                            <input type="text" class="form-input" value="19530" readonly>
                        </div>
                    </div>
                    <div class="config-section">
                        <h3>嵌入配置</h3>
                        <div class="form-group">
                            <label>提供商</label>
                            <input type="text" class="form-input" value="ollama" readonly>
                        </div>
                        <div class="form-group">
                            <label>维度</label>
                            <input type="text" class="form-input" value="1536" readonly>
                        </div>
                    </div>
                </div>
            </div>
        </main>
    </div>

    <!-- 模态框 -->
    <!-- 创建项目模态框 -->
    <div id="create-project-modal" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <h3>创建项目</h3>
                <span class="close" onclick="closeModal('create-project-modal')">&times;</span>
            </div>
            <div class="modal-body">
                <div class="form-group">
                    <label for="project-name">项目名称</label>
                    <input type="text" id="project-name" class="form-input" placeholder="请输入项目名称">
                </div>
                <div class="form-group">
                    <label for="project-description">项目描述</label>
                    <textarea id="project-description" class="form-textarea" placeholder="请输入项目描述（可选）"></textarea>
                </div>
            </div>
            <div class="modal-footer">
                <button class="btn btn-secondary" onclick="closeModal('create-project-modal')">取消</button>
                <button class="btn btn-primary" onclick="createProject()">创建</button>
            </div>
        </div>
    </div>

    <!-- 创建训练数据模态框 -->
    <div id="create-training-data-modal" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <h3>添加训练数据</h3>
                <span class="close" onclick="closeModal('create-training-data-modal')">&times;</span>
            </div>
            <div class="modal-body">
                <div class="form-group">
                    <label for="training-data-type">数据类型</label>
                    <select id="training-data-type" class="form-select" onchange="toggleTrainingDataFields()">
                        <option value="ddl">DDL (数据定义语言)</option>
                        <option value="question_sql">问题-SQL 对</option>
                        <option value="description">描述信息</option>
                    </select>
                </div>
                <div class="form-group" id="content-group">
                    <label for="training-data-content">内容</label>
                    <textarea id="training-data-content" class="form-textarea" placeholder="请输入内容"></textarea>
                </div>
                <div class="form-group" id="question-group" style="display: none;">
                    <label for="training-data-question">问题</label>
                    <textarea id="training-data-question" class="form-textarea" placeholder="请输入自然语言问题"></textarea>
                </div>
                <div class="form-group" id="sql-group" style="display: none;">
                    <label for="training-data-sql">SQL</label>
                    <textarea id="training-data-sql" class="form-textarea" placeholder="请输入对应的 SQL 语句"></textarea>
                </div>
            </div>
            <div class="modal-footer">
                <button class="btn btn-secondary" onclick="closeModal('create-training-data-modal')">取消</button>
                <button class="btn btn-primary" onclick="createTrainingData()">添加</button>
            </div>
        </div>
    </div>

    <!-- 加载指示器 -->
    <div id="loading" class="loading">
        <div class="spinner"></div>
        <p>处理中...</p>
    </div>

    <!-- 通知 -->
    <div id="notification" class="notification">
        <span id="notification-message"></span>
        <button onclick="closeNotification()">&times;</button>
    </div>

    <script src="/static/script.js"></script>
</body>
</html>